<template>
	<view class="form-templates" v-if="datas.params">
		<view class="item_label">
			<text class="label_required" v-if="datas.params.required">*</text>
			<text class="label_title">{{ datas.params.title }}</text>
		</view>
		<view class="item_tip" v-if="datas.params.explain">{{ datas.params.explain }}</view>
		<view class="item_content">
			<block v-if="datas.type == 'img'"><uploadimg :imglist="[]" :maxnum="datas.params.maxNumber" @getimg="getimg"></uploadimg></block>
			<block v-if="datas.type == 'text'">
				<view><u-input :border="true" :placeholder="datas.params.tip" v-model="datas.params.value" type="text" /></view>
			</block>
			<block v-if="datas.type == 'textarea'">
				<view><u-input :border="true" :placeholder="datas.params.tip" type="textarea" v-model="datas.params.value" /></view>
			</block>
			<block v-if="datas.type == 'radio'">
				<u-radio-group v-model="datas.params.value">

					<u-radio v-for="(item, i) in datas.list" :key='i' :name="item.value">{{ item.label }}</u-radio>
				</u-radio-group>
			</block>
			<block v-if="datas.type == 'checkbox'">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="item.value" :name="item.label" v-for="(item, i) in datas.list" :key='i'>{{ item.label }}</u-checkbox>
				</u-checkbox-group>
			</block>
			<block v-if="datas.type == 'select'" :key='rk'>
				<u-select @confirm="confirm" v-model="show" :list="datas.list"></u-select>
				<view class="select_div" @click="show = true">
					<text v-if="datas.params.value">{{ datas.params.value }}</text>
					<text class="tip" v-else>{{ datas.params.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'address'">
				<u-picker @confirm="confirmaddress" v-model="show" mode="region"></u-picker>

				<view class="select_div" @click="show = true">
					<text v-if="datas.params.province">{{ datas.params.province + datas.params.city + datas.params.area }}</text>
					<text class="tip" v-else>{{ datas.params.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'datepicker'">
				<u-picker @confirm="confirmdate" mode="time" v-model="show" :params="params"></u-picker>
				<view class="select_div" @click="show = true">
					<text v-if="datas.params.value">{{ datas.params.value }}</text>
					<text class="tip" v-else>{{ datas.params.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'date'">
				<u-picker @confirm="confirmdate" mode="time" v-model="show" :params="params"></u-picker>

				<view class="select_div" @click="selecttime('date', 1)">
					<text v-if="datas.params.start.value">{{ datas.params.start.value }}</text>
					<text class="tip" v-else>{{ datas.params.start.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
				<view class="select_div" @click="selecttime('date', 0)">
					<text v-if="datas.params.end.value">{{ datas.params.end.value }}</text>
					<text class="tip" v-else>{{ datas.params.end.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'card'">
				<view><u-input :border="true" v-model="datas.params.value" :placeholder="datas.params.tip" /></view>
			</block>
			<block v-if="datas.type == 'time'">
				<u-picker @confirm="confirmtime" mode="time" v-model="show" :params="params_time"></u-picker>

				<view class="select_div" @click="show = true">
					<text v-if="datas.params.value">{{ datas.params.value }}</text>
					<text class="tip" v-else>{{ datas.params.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'times'">
				<u-picker @confirm="confirmtime" mode="time" v-model="show" :params="params_time"></u-picker>

				<view class="select_div" @click="selecttime('times', 1)">
					<text v-if="datas.params.start.value">{{ datas.params.start.value }}</text>
					<text class="tip" v-else>{{ datas.params.start.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
				<view class="select_div" @click="selecttime('times', 0)">
					<text v-if="datas.params.end.value">{{ datas.params.end.value }}</text>
					<text class="tip" v-else>{{ datas.params.end.tip }}</text>
					<text class="el-sc-xia3"></text>
				</view>
			</block>
			<block v-if="datas.type == 'mobile'">
				<view><u-input :border="true" v-model="datas.params.value" :placeholder="datas.params.tip" /></view>
			</block>
		</view>
	</view>
</template>
<script>
import uploadimg from '@/components/upload/upload.vue';
export default {
	data() {
		return {
			show: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			params_time: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			isstart: true,
			rk:0,
			datas:{},
		};
	},
	watch:{
		'datas.params':{
		  handler:function(){
			  this.outdata()
		    //监听标签数量变化
		    //this.items = data.content;
		  },
		  deep:true
		},
	},
	components: {
		uploadimg
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	mounted() {
		this.datas=this.mydata
	},
	methods: {
		outdata(){
			this.$emit('outdata',this.datas)
		},
		getimg(e) {
			this.datas.params.value = e;
		},
		selecttime(a, b) {
			this.type = a;
			this.isstart = b;
			this.show = true;
		},
		confirm(e) {
			this.datas.params.value = e[0].label;
			this.rk++
			this.outdata()
		},
		confirmaddress(e) {
			this.datas.params.area = e.area.label;
			this.datas.params.city = e.city.label;
			this.datas.params.province = e.province.label;
			this.datas.params.value = e.province.label + e.city.label + e.area.label;
		},
		confirmdate(e) {
			if (this.type == 'date') {
				if (this.isstart) {
					this.datas.params.start.value = e.year + '-' + e.month + '-' + e.day;
				} else {
					this.datas.params.end.value = e.year + '-' + e.month + '-' + e.day;
				}
				if (this.datas.params.start.value && this.datas.params.end.value) {
					this.datas.params.value = this.datas.params.start.value + '~' + this.datas.params.end.value;
				}
			} else {
				this.datas.params.value = e.year + '-' + e.month + '-' + e.day;
			}
		},
		confirmtime(e) {
			if (this.type == 'times') {
				if (this.isstart) {
					this.datas.params.start.value = e.hour + ':' + e.minute;
				} else {
					this.datas.params.end.value = e.hour + ':' + e.minute;
				}
				if (this.datas.params.start.value && this.datas.params.end.value) {
					this.datas.params.value = this.datas.params.start.value + '~' + this.datas.params.end.value;
				}
			} else {
				this.datas.params.value = e.hour + ':' + e.minute;
			}
		},
		checkboxGroupChange(e) {
			this.datas.params.value = e.join(',');
		}
	}
};
</script>
<style lang="scss" scoped>
.form-templates {
	background: #ffffff;
	padding: 0 20px;
	padding-bottom: 20px;
	.el-checkbox {
		margin-bottom: 10px;
	}
	.item_label {
		display: flex;
		align-items: center;
		padding: 16px 0;
		.label_required {
			margin-left: 5px;
			margin-right: 10px;
			color: #de434f;
		}
	}
	.item_tip {
		font-size: 12px;
		line-height: 17px;
		padding-bottom: 18px;
		color: #969696;
		word-break: break-all;
	}

	.select_div {
		width: 100%;
		border: 1px solid #dcdfe6;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		border-radius: 8rpx;
	}
	.tip {
		color: #dcdfe6;
	}
}
</style>
